<template>
  <div class="message-container">
    <div class="message-container__l">
      <nav-wrap
        width="302px"
        :list="list"
      ></nav-wrap>
    </div>
    <div class="message-container__r">
      <div class="container__tab">
        <div class="tab__left">
          <nuxt-link tag="div" class="left__item" to="/personal-center/message/all">
            <p class="abs"></p>
            <p class="word">全部</p>
            <p class="line" v-if="selected==='personal-center-message-all'"></p>
          </nuxt-link>

          <nuxt-link tag="div" class="left__item" to="/personal-center/message/comment">
            <p class="abs"></p>
            <p class="word">评论</p>
            <p class="line" v-if="selected==='personal-center-message-comment'"></p>
          </nuxt-link>

          <nuxt-link tag="div" class="left__item" to="/personal-center/message/praise">
            <p class="abs"></p>
            <p class="word">喜欢</p>
            <p class="line" v-if="selected==='personal-center-message-praise'"></p>
          </nuxt-link>

          <nuxt-link tag="div" class="left__item" to="/personal-center/message/follow">
            <p class="abs"></p>
            <p class="word">粉丝</p>
            <p class="line" v-if="selected==='personal-center-message-follow'"></p>
          </nuxt-link>

          <nuxt-link tag="div" class="left__item" to="/personal-center/message/notice">
            <p class="abs"></p>
            <p class="word">公告</p>
            <p class="line" v-if="selected==='personal-center-message-notice'"></p>
          </nuxt-link>
        </div>
        <p class="tab__right" @click="dataPutReadAll">
          全部标记为已读
        </p>
      </div>

       <nuxt-child></nuxt-child>
    </div>
  </div>
</template>

<script>


  import NavWrap from "../../components/pc/nav/navWrap";
  import config from "../../action/config";
  import {globalBus} from "../../components/common/globalBus";


  export default {
    data() {
      return {
        list: [
          {
            label: '我的消息',
            address: '/personal-center/message',
            id: '我的消息'
          }
        ],
      }
    },
    components: {
      NavWrap
    },

    watch:{
      $route(to,from){
        if(this.$route.name){
          this.selected = this.$route.name;
        }
      }
    },

    created() {
      this.selected = this.$route.name;
    },

    methods: {


      dataPutReadAll() {
        this.$axios.$put(config.api.put.Message.readAll).then((response) => {
          if(response.code===0){
            this.$message({
              type: 'success',
              message: '已全部标记已读'
            });
            this.message = [];
            globalBus.$emit(config.event.listenMessageClearAll)
            this.$store.commit('message/clearUnReadCount');
          } else {
            this.$message({
              type: 'warning',
              message: '没有未读信息'
            });
          }
        })
      },

    }
  }
</script>

<style lang="scss" scoped>
  .message-container{
    width: $pageWidth;
    margin:0 auto;
    padding-bottom: 32*$length;
    @extend %flex-row-spb;
    align-items: flex-start;
    .message-container__l{
      margin-top:16*$length;
      overflow:hidden;
      width:302*$length;
    }
    .message-container__r{
      overflow:hidden;
      width:938*$length;
      margin-top:16*$length;
      border-radius: 4*$length;
      background-color: #fff;

      .container__tab{
        box-sizing: border-box;
        padding:18*$length 24*$length;
        border-bottom:1px solid #EFEFEF;

        @extend %flex-row-spb;
        .tab__left{
          @extend %flex-row-spb;

          .left__item{
            position:relative;
            @extend %flex-column-spb;
            margin-right: 24*$length;

            .abs{
              position:absolute;

            }

            .word{
              @include fontStyle(14,19,500,#333,center);
              @extend %animate-transition;
              @extend %cursorPointer;
              &:hover{
                color:#00AAE6
              }
            }
            .line{
              position:absolute;
              top:32*$length;
              margin:0 auto;
              left:0;
              right:0;
              width:16*$length;
              height:4*$length;
              border-radius:2px  2px 0 0;
              background-color: #00AAE6;
            }
          }
        }
         .tab__right{
           @include fontStyle(12,16,500,#999,center);
           @extend %animate-transition;
           @extend %cursorPointer;
           &:hover{
             color:#00AAE6
           }
         }
      }

    }
  }
</style>
